<template>
  <div class="p-4 flex flex-col space-y-4">
    <a-card bordered class="rounded-xl">
      <a-page-header title="工作台" :subtitle="`欢迎回来!${info?.userName}`">
        <template #breadcrumb>
          <a-breadcrumb>
            <a-breadcrumb-item><icon-apps /></a-breadcrumb-item>
            <a-breadcrumb-item>仪表盘</a-breadcrumb-item>
            <a-breadcrumb-item>工作台</a-breadcrumb-item>
          </a-breadcrumb>
        </template>
        <template #extra>
          <AddButton @add="addFlow">新增</AddButton>
        </template>
      </a-page-header>
    </a-card>

    <FlowAction v-model:visible="visible" @doRefresh="getDataList" />

    <a-card v-if="info" bordered v-for="data in dataList" :key="data.id" :title="data.customerName">
      <template #extra>
        <a-popconfirm
          :content="`点击确认流转:${Status[+data.status + 1]?.title}?`"
          @ok="
            updateFlow({
              ...data,
              status: +data.status + 1,
            })
          "
        >
          <a-button type="primary" size="mini"> 流转 </a-button>
        </a-popconfirm>
      </template>
      <a-steps type="arrow" :current="+data.status">
        <a-step
          v-for="(s, key) in Status.filter((s, i) => i)"
          :key="key"
          :description="s.description"
          >{{ s.title }}</a-step
        >
      </a-steps>
    </a-card>
  </div>
</template>
<script setup lang="ts">
  import { RoleId } from '@/types/role.d'
  import { Status, ViewType, useFlow } from './index.hook.tsx'
  import useUserStore from '@/store/modules/user'
  import { useWorker } from './workplace.hook'
  import FlowAction from './components/FlowAction.vue'

  const { visible, dataList, getDataList, updateFlow, addFlow } = useWorker()

  const { info } = useUserStore()
</script>
